<template>
    <div class="login-con">
        <div class="login-form">
            <h2>vue-antd-admin</h2>
            <div class="form-input">
                <a-input placeholder="用户名" v-model="username" />
            </div>
            <div class="form-input">
                <a-input placeholder="密码" v-model="password" />
            </div>

            <div class="form-input">
                <a-button type="primary" style="width: 100%" @click="login">登录</a-button>
            </div>

        </div>
    </div>
</template>

<script>
    import { login,menuList } from '@/services/loginServices'

  export default {
    name: "Login",
    data(){
      return {
        username:'',
        password:''
      }
    },
    methods:{
      async login(){
        //登录
        console.log(this.username)
        console.log(this.password)
        const loginRes = await login({
          username:this.username,
          password:this.password,
        })
        if(loginRes.code === 0){
          sessionStorage.setItem('token',loginRes.data.token)
          sessionStorage.setItem('role',JSON.stringify(loginRes.data.roles))
          this.$message.success(loginRes.msg)
          const menuRes = await menuList()
          sessionStorage.setItem('menu',JSON.stringify(menuRes.data))
          if(menuRes.code === 0){
            this.$store.commit('menu/getMenuList',menuRes.data)
          }
          this.$router.push('/')
        }else{
          this.$message.error(loginRes.msg)
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
    .login-con
        width 100%
        height 100%
        overflow hidden
        background url("../../static/login_bg.png") no-repeat
        display flex
        align-items center
        justify-content center

    .login-form
        width 350px
        box-shadow 0 6px 20px 5px rgba(40, 120, 255, 0.1), 0 16px 24px 2px rgba(0, 0, 0, 0.05)
        background-color #ffffff
        border-radius 6px
        padding 50px 30px
        >h2
            text-align center
            font-size 36px
            color #396afe
        .form-input
            margin-top 30px
</style>